<template>
	<view class="enterprice-item-box">
		<view class="enterprice-item-left">
			<img :src="imageUrl" alt="" class="enterprice-left-image" />
		</view>
		<view class="enterprice-item-right">
			<view class="enterprice-title">
				<view>{{title}}</view>
				<view class="icon-tab" v-if="talentTags.length>0">
					<view :class="item.name" v-for="(item,index) in talentTags"></view>
				</view>
			</view>
			<view class="enterprice-list">
				<view class="enterprice-tab" v-for="(item,index) in list" :key="index+'enterprice'">{{item}}</view>
			</view>
			<view class="info-box">
				<view class="info-box-time" v-if="time">成立于{{time}}</view>
				<view class="info-box-person" v-if="person"> 法定代表人：{{person}}</view>
			</view>
			<view class="enterprice-btton-box">
				<view class="enterprice-icon-box" :style="{backgroundColor:bgColor}" v-for="(item,index) in iconList"
					:key="index+'icon'" @click="getEnterprice(item.name)">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from "vue"
	const emit = defineEmits('getEnterpriceID')
	const props = defineProps({
		imageUrl: {
			type: String,
			default: "/static/image/mutual-assistance/hutai.png"
		},
		bgColor: {
			type: String,
			default: "#FFFFFF"
		},
		id: {
			type: String,
			default: "1930383"
		},
		title: {
			type: String,
			default: "王明飞"
		},
		list: {
			type: Array,
			default: ["小微企业", "高新技术", "市级专精特新"]
		},
		time: {
			type: String,
			default: ""
		},
		person: {
			type: String,
			default: ""
		},
		iconList: {
			type: Array,
			default: [{
				name: "荣耀画像",
				icon: "person"
			}, {
				name: "企业空间",
				icon: "enterprice"
			},
			// {
			// 	name: "加为好友",
			// 	icon: "frends"
			// }
			]
		},
		talentTags: {
			type: Array,
			default: () => new Array()
		}



	})

	function getEnterprice(data) {
		emit("getEnterpriceID", data)
	}
</script>

<style lang="less" scoped>
	.enterprice-item-box {
		background-color: #FFFFFF;
		width: 100vw;
		display: flex;
border-bottom: 1rpx solid #dadada;
&:last-of-type{
	 border-bottom: 0rpx solid #dadada;
  }
		.enterprice-item-left {
			width: 55rpx;
			margin: 20rpx 20rpx 20rpx 0rpx;
			.enterprice-left-image {
				width: 55rpx;
				height: 55rpx;
			}
		}
		.enterprice-item-right {
			flex: 1;
			.enterprice-title {
				display: flex;
				font-size: 31.3rpx;
				justify-content: space-between;
				font-family: "ali-m";

				.icon-tab {
					width: 50vw;
					display: flex;
					justify-content: flex-end;

					.badgeone {
						width: 14vw;
						height: 7vh;
						background: @mutual-assistance-badgeone-img no-repeat center center;
						background-size: 100% 100%;
					}

					.badgetwo {

						width: 14vw;
						height: 7vh;
						background: @mutual-assistance-badgetwo-img no-repeat center center;
						background-size: 100% 100%;
					}

					.badgethree {

						width: 14vw;
						height: 7vh;
						background: @mutual-assistance-badgethree-img no-repeat center center;
						background-size: 100% 100%;
					}

					.badgefour {

						width: 14vw;
						height: 7vh;
						background: @mutual-assistance-badgefour-img no-repeat center center;
						background-size: 100% 100%;
					}
				}
			}

			.enterprice-list {
				display: flex;
				// justify-content: space-between;
				margin: 30rpx 0 10rpx 0;
				width: 100%;

				.enterprice-tab {
					margin-right: 30rpx;
					color: #5590F6;
					background-color: #F4F5FA;
					padding: 5px;
					font-size: 19.5rpx;
				}
			}

			.info-box {
				color: #9B9B9B;
				display: flex;
				// justify-content: space-between;
				font-size: 24rpx;
				text-overflow: ellipsis;
				white-space: nowrap;

				.info-box-time {
					padding-right: 0.6rem;
				}


			}

			.enterprice-btton-box {
				display: flex;
				margin-top: 0.5rem;
				justify-content: flex-start;
				width: 100%;
				color: #9B9B9B;
				font-size: 24rpx;
				.enterprice-icon-box{
					padding: 10rpx 20rpx;
					margin-right: 20rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>
